import React, { Component } from 'react'
import { Icon } from 'react-vant';
import { Picker } from 'react-vant';
import '../App.css'
import axios from '../utils/request'

export default class One extends Component {
    state = {
        columns: [
            {
                cityName: '是',
                cities: [
                    {
                        cityName: '1年',
                        cities: [{ cityName: '白酒' }, { cityName: '红酒' }],
                    },
                    {
                        cityName: '2年',
                        cities: [{ cityName: '白酒' }, { cityName: '红酒' }],
                    },
                ],
            },
            {
                cityName: '否',
                cities: [
                    {
                        cityName: '1年',
                        cities: [{ cityName: '白酒' }, { cityName: '红酒' }],
                    },
                    {
                        cityName: '2年',
                        cities: [{ cityName: '白酒' }, { cityName: '红酒' }],
                    },
                ],
            },
        ],
        columnsFieldNames: {
            text: 'cityName',
            children: 'cities',
        },

        objectValue: [
            {
                number: "",
                stature: "",
                weight: "",
                BMI: "",
                waistline: "",
                smoke: "",
            }
        ],
        list: []
    }
    com = () => {
        this.setState({
            display: 'block'
        })
    }
    back = () => {
        this.props.history.go(-1)
    }

    save(objectValue) {
        axios({
            url: "/one",
            method: 'post',
            data: {
                number: objectValue.number,
                stature: objectValue.stature,
                weight: objectValue.weight,
                BMI: objectValue.BMI,
                waistline: objectValue.waistline,
                smoke: objectValue.smoke,
            }
        }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.data
            })
        })
    }

    matter(value, key) {
        let { objectValue } = this.state
        objectValue[key] = value
        this.setState({
            objectValue
        })
    }
    render() {
        const { objectValue } = this.state
        return (
            <div className="onq">
                <div className="onq_top">
                    <li onClick={() => this.back()}>&ensp;<Icon name="arrow-left" /></li>
                    <li>健康档案</li>
                    <li onClick={() => this.save(objectValue)}>保存&emsp;</li>
                </div>
                <div className="onq_main">
                    <div className="onq_one">
                        <li>
                            <span>身份证号</span><input type="text" value={objectValue.number} onChange={(e) => this.matter(e.target.value, "number")} />
                        </li>
                        <li>
                            <span>身高</span>&emsp;&emsp;&ensp;<input type="text" value={objectValue.stature} onChange={(e) => this.matter(e.target.value, "stature")} />
                        </li>
                        <li>
                            <span>体重</span>&emsp;&emsp;&ensp;<input type="text" value={objectValue.weight} onChange={(e) => this.matter(e.target.value, "weight")} />
                        </li>
                        <li>
                            <span>BMI</span>&emsp;&emsp;&ensp;<input type="text" value={objectValue.BMI} onChange={(e) => this.matter(e.target.value, "BMI")} />
                        </li>
                        <li>
                            <span>腰围</span>&emsp;&emsp;&ensp;<input type="text" value={objectValue.waistline} onChange={(e) => this.matter(e.target.value, "waistline")} />
                        </li>
                    </div>
                    <div className="onq_two">
                        <li>
                            <span>吸烟史</span>&emsp;<input type="text" value={objectValue.smoke} onChange={(e) => this.matter(e.target.value, "smoke")} />
                        </li>
                        <li>
                            <span>饮酒史</span><span id="arrow" onClick={() => this.com()} >请选择<Icon name="arrow" /></span>
                            <div className="onq_three">
                                <Picker title="饮酒史" columnsFieldNames={this.state.columnsFieldNames} columns={this.state.columns} />
                            </div>
                        </li>
                    </div>
                </div>
            </div>
        )
    }
}
